<template>
  <!-- 历史告警记录 -->
  <BaseMainSlot :show-tab="false" :showBtnBox="false">
    <template v-slot:search-box>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="search()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">鱼塘名称</div>
            <el-select filterable clearable v-model="fishPondId" filterable clearable>
              <el-option v-for="item in fishPondArr" :key="item.fishPondId" :label="item.pondName"
                :value="item.fishPondId" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">数据类型</div>
            <el-select filterable clearable v-model="dataTypeId" filterable clearable>
              <el-option v-for="(item, index) in dataTypeList" :key="index" :value="item.dataTypeId"
                :label="item.dataTypeName" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">数据项</div>
            <el-select filterable clearable v-model="dataItemId" filterable clearable>
              <el-option v-for="(item, index) in dataitemlist" :key="index" :value="item.dataItemId"
                :label="item.dataItemName" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">告警日期</div>
            <el-date-picker v-model="buildDateTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-slot:tab-select>
      <selectbut :buttonselectlist="selectbutlist" @nowselectbuttonindex="gettabletype" />
    </template>
    <template v-slot:table-box>
      <el-table v-loading="false" highlight-current-row :data="tableData" stripe border height="88%"
        @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column v-if="nowselecttype === 0" prop="fishPondName" label="鱼塘名称" min-width="300" />
        <el-table-column v-if="nowselecttype === 0" prop="messageInfo" label="告警信息" min-width="300" />
        <el-table-column prop="dataItemName" label="告警数据项" min-width="300" />
        <el-table-column v-if="nowselecttype === 0" prop="alarmPresetValue" label="预设告警值" min-width="160" />
        <el-table-column v-if="nowselecttype === 0" prop="actualAlarmValue" label="实际告警值" min-width="160" />
        <el-table-column prop="happenTime" label="发生时间" min-width="160" />
        <el-table-column prop="dataTypeName" label="告警数据类型" min-width="160" />
        <el-table-column v-if="nowselecttype === 0" prop="disposeStatus" label="告警信息状态" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.alarmMessageId"
              :style="{ 'color': scope.row.disposeStatus === true ? '#5cb87a' : '#f56c6c' }">{{
                filtername(scope.row.disposeStatus) }}</div>
          </template>
        </el-table-column>

        <el-table-column v-if="nowselecttype === 0" prop="alarmChargeName" label="处理人" min-width="160" />
        <!-- <el-table-column prop="disposeStatus" label="告警信息状态" :formatter="formatBoolean" /> -->
        <el-table-column prop="disposeTime" label="处理时间" min-width="160" />
        <el-table-column v-if="nowselecttype === 0" label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.alarmMessageId" type="success" plain size="small"
              @click="getalrmmessage(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
        @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
    </template>
  </BaseMainSlot>
</template>
<script>
import Pagination from "@/components/Pagination";
import selectbut from "@/components/selectbutton/index.vue";
// import userreq from "@/api/user/index";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import { mymixin } from "@/utils/mixins";
import SearchBox from "@/components/SearchBox";

import nowpagereqs from "@/api/monitoring-alarm/alarm-category-management";
import nowpagereq from "@/api/monitoring-alarm/historical-alarm-record/index";
import alarmNowpagereq from "@/api/monitoring-alarm/alarm-category-management/index";
import fishPondApi from "@/api/basic-info-manage/fishPond";
import dataItemApi from "@/api/basic-info-manage/data-item-manage/index";
import dataTypeApi from "@/api/basic-info-manage/data-type-manage";
export default {
  name: "HistoricalAlarmRecord",
  components: { Pagination, BaseMainSlot, selectbut, SearchBox },
  mixins: [mymixin],
  data () {
    return {
      // 可选择数据类型
      dataTypeList: [],
      // 可选择批次
      batchList: [],
      nowselecttype: 0, // 0为物联自动告警 1为手动记录告警 2为数值告警
      dataitemlist: [],
      searchlist: {
        dataItemId: "",
        date: ""
      },
      // 选择类型
      selectbutlist: [
        { name: "物联自动告警" }
        // { name: "设备异常告警" }
        //  { name: "手动记录告警" },
      ],
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      // 可选择所有地块
      alarmTypeList: [],
      nowselectedList: [],
      // 鱼塘
      facilityList: [],
      facilityNo: "",
      buildDateTime: "",
      fishPondId: "",
      dataTypeId: "",
      dataItemId: "",
      fishPondArr: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  watch: {},
  created () {
    this.search();
  },
  mounted () {
    this.getselecltlist();
  },
  methods: {
    // 获取当前拥有类型表格
    getTableDataList () {
      // 拦截表格数据请求
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        sortStr: "happenTime",
        entity: {
          fishPondId: this.fishPondId || undefined,
          alarmTypeId: this.alarmTypeId || undefined,
          dataTypeId: this.dataTypeId || undefined,
          dataItemId: this.dataItemId || undefined,
          // disposeTime: this.buildDateTime || undefined,
          disposeStatus: true
        }
      };
      if (this.buildDateTime) {
        params.entity.startTime = this.buildDateTime[0] + ' 00:00:00';
        params.entity.endTime = this.buildDateTime[1] + ' 24:00:00'
      }
      nowpagereq.queryPageList(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("当前告警历史表格获取失败");
        }
        let data = res.data.content;
        // 赋值总条数
        this.totalSize = res.data.totalElements;
        // 赋值数组
        this.tableData = data;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    // 表格中的标签
    filterTag (value, row) {
      return row.disposeStatus === value;
    },
    // 表格中的标签
    filtername (value) {
      if (value) {
        return "已完成";
      } else {
        return "未完成";
      }
    },
    // 获取不同类型的表格数据
    gettabletype (i) {
      this.nowselecttype = i;
      if (i === 0) {
      } else if (i === 1) {
        this.getTableDataListtwo();
      } else if (i === 2) {
        // this.getTableDataListtwo()
      }
    },
    // 查看详细数据
    getalrmmessage (e) {
      console.log(e.disposeContent)
      this.$alert(e.disposeContent, "处理结果", {
        showConfirmButton: false,
        closeOnClickModal: true,
        confirmButtonClass: "zh-button-two"
      });
    },
    // 布尔值格式化
    formatBoolean (row, column, cellValue) {
      var ret = ""; // 你想在页面展示的值
      if (cellValue) {
        ret = "已完成"; // 根据自己的需求设定
      } else if (cellValue === false) {
        ret = "未完成";
      }
      return ret;
    },
    // 获取下拉选择数据
    async getselecltlist () {
      // 获取鱼塘
      const { data: resp } = await fishPondApi.queryByCondition({});
      if (resp !== undefined) {
        this.fishPondArr = resp;
      } else this.fishPondArr = [];
      dataTypeApi.queryExistence().then(res => {
        this.dataTypeList = res.data;
      });
      this.chanbatch({ fishPondId: "" });
    },
    chanbatch (e) {
      // // 获取所有监测数据项
      dataItemApi.queryByCondition({ fishPondId: e.fishPondId }).then(res => {
        this.dataitemlist = res.data;
      });
    },
    handleSelectionChange (list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map(item => {
        return item.ownUnitId;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    delmessage () {
      if (this.nowChanceStau === "del") {
        nowpagereq.dellist(this.nowselectedList).then(res => {
          if (res.success) {
            this.search();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
      }
    },
    save () {
      // if (this.nowChanceStau === 'add') {
      //   nowpagereq.addUnitlist(this.nowselectedList).then(
      //     res => {
      //       if (res.success) {
      //         this.getTableDataListone()
      //         this.$message.success('添加成功')
      //       } else {
      //         this.$message.error('添加失败')
      //       }
      //     }
      //   )
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.zhtabletitle {
  color: #31f7dd;
  margin-bottom: 10px;
}
</style>
